<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>骡窝窝门票中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">-->
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travel.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/chosen/component-chosen.css"/>
    <script src="/js/plugins/chosen/chosen.jquery.js"></script>

    <script>
        //发送异步请求获取旅游地点的数据
        $(function () {


            $.get("/regions", function (data) {
                var html = "";
                //遍历JSON数据拼接到旅游地点下拉框中
                $.each(data, function (index, ele) {
                    html += "<option value='" + ele.id + "'>" + ele.name + "</option>"
                })

                $("#regions").html(html);
                //对下拉框使用JqueryChosen插件
                $("#regions").chosen();
            })
        })
    </script>

    <script>

        var regionId;
        $(function () {
            $("#query").click(function () {
                console.log("进行精确查询");
                $("#detailForm").ajaxSubmit({
                        beforeSubmit: function (params, form, options) {
                            regionId = params.regionId

                        },
                        success: function (data) {
                            console.log(data);
                            //直接重新渲染!
                            $("#ticket").renderValues({list: data.list}, {
                                setHref: function (ele, val) {
                                    var href = $(ele).attr("href") + val;
                                    $(ele).attr("href", href);
                                    $("#regions").val(regionId)
                                }
                            });

                        }
                    }
                )

            })
        })
    </script>


    <script>

        $(function () {
            //记录当前页
            var currentPage = 1;
            //总页数
            var totalPage;
            var dataList = [];


            //第一页
            $.get("/scenicTicket/getScenicCommend", function (data) {
                console.log(data);
                $.merge(dataList, data.list)
                $("#ticket").renderValues({list: dataList}, {
                    setHref: function (ele, val) {
                        var href = $(ele).attr("href") + val;
                        $(ele).attr("href", href);
                    }
                });
                currentPage += 1;
                totalPage = data.pages;
            })


            $(window).scroll(function () {
                if ($(window).height() + $(window).scrollTop() >= $(document).height()) {
                    if (currentPage <= totalPage) {
                        console.log(totalPage);
                        $.get("/scenicTicket/getScenicCommend", {
                            currentPage: currentPage,
                            pageSize: 4
                        }, function (data) {
                            $.merge(dataList, data.list);
                            $("#ticket").renderValues({list: dataList}, {
                                setHref: function (ele, val) {
                                    var href = $(ele).attr("href") + val;
                                    $(ele).attr("href", href);
                                }
                            });
                            currentPage += 1;
                        })
                    } else {
                        $(document).dialog({
                            autoClose: 2500,
                            content: "到底了",
                        });
                    }
                }

            })
        })
    </script>


</head>

<body style="height: auto">
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="/index.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed">
        <div class="aui-center">
            <h3><span class="aui-center-title">骡窝窝门票购买</span></h3>
        </div>
        <a href="javascript:;" class="aui-navBar-item">
            <i class="icon icon-sys"></i>
        </a>
    </header>
    <section class="aui-scrollView">
            <img width="500px" height="200"  src="upload/6eb124e3-cacb-4daf-8e72-7c801d275c57.jpeg" >
        <div class="aui-tab" data-ydui-tab>

            <div class="tab-panel-item  selectedCommend">
                <div class="search_box">
                    <div class="search">
                        <form id="detailForm" method="get" action="/scenicTicket/getScenic">
                            景点名称:<input id="keyword" class="enter" name="keyword" placeholder="请输入景点名字"/>
                            <button id="query" type="button" value="精确搜索" class="fa fa-search fa-xxx">精确搜索</button>
                            <div class="container">
                                <label>旅游地点:</label>
                                <select class="form-control" id="regions" name="regionId">
                                    <option value="-1">请选择</option>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <h4>景点推荐:</h4>
            <hr/>
            <div class="tab-panel">
                <div class="commend" id="ticket">
                    <div render-loop="list">
                        <div class="row detail">
                            <div class="col">
                                <a href="/orderScenic.html?id=" render-fun="setHref" render-key="list.id">
                                    <h4 render-html="list.name"></h4>
                                </a>
                                <p>地址:
                                    <span class="addr" render-html="list.address"></span>
                                </p>
                                <p>简介: <span class="addr" render-html="list.intro"></span></p>
                            </div>
                            <div class="col bigimg">
                                <a href="/orderScenic.html?id=" render-fun="setHref" render-key="list.id">
                                    <img render-src="list.coverUrl">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!--   搜索-->

            </div>
        </div>

    </section>
</section>
</body>
</html>
